{% extends "pages/auth/_layout.html" %}
{% from "components/macros.html" import submit_button %}
{% from "components/auth_macros.html" import auth_field, auth_banner %}

{% block title %}Choose a new password - {{ project_name }}{% endblock %}

{% block auth_form %}
<div x-data="resetForm()">
  <h1 class="text-2xl font-semibold text-white mb-2">Choose a new password</h1>
  <p class="text-sm text-aegis-muted mb-8">Then sign in with it.</p>

  <form class="space-y-4" @submit.prevent="submit()">
    {{ auth_banner("error") }}

    {{ auth_field("password", "New password", type="password", autocomplete="new-password", minlength=8, placeholder="At least 8 characters") }}

    {{ submit_button("Update password", "Updating…") }}
  </form>
</div>

<script>
function resetForm() {
  return {
    loading: false,
    error: '',

    async submit() {
      if (this.loading) return;
      this.loading = true;
      this.error = '';
      const token = new URLSearchParams(window.location.search).get('token') || '';
      if (!token) {
        this.loading = false;
        this.error = 'This reset link is incomplete. Request a new one.';
        return;
      }
      const password = this.$el.querySelector('input[name=password]').value;
      let resp;
      try {
        resp = await fetch('/api/v1/auth/password-reset/confirm', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token: token, new_password: password }),
        });
      } catch (_) {
        this.loading = false;
        this.error = 'Could not reach the server. Try again.';
        return;
      }
      if (resp.ok) {
        // Land on /login with the banner rather than rendering "done" here:
        // the next thing to do is sign in, so send them there.
        window.location = '/login?reset=1';
        return;
      }
      this.loading = false;
      this.error = 'That reset link has expired or already been used. Request a new one.';
    },
  };
}
</script>
{% endblock %}

{% block auth_footer %}
Need a new link? <a href="/forgot-password" class="text-aegis-teal hover:text-white transition-colors">Start over</a>.
{% endblock %}